<template>
  <div>
    <el-card class="box-card">
      <!-- 卡片顶部添加品牌按钮 -->
      <el-button type="primary" @click="addTrademark" v-has="'btn.Trademark.add'"
        >添加品牌</el-button
      >
      <!-- 使用表格组件,展现我们的获取的平台数据
     border横向分割线
     align 文字排版样式
        el-table-column
          type有三种属性
            1多选
            2显示该行的索引(从1开始算)
            3可展开按钮

          prop 字段名称
            也可以在其中el-table-column使用插槽来实现我们图片,给文字+样式,使用prop的话,默认是使用div来做的
            使用插槽,row是我们给予的数据的数组.....$index是其数组的索引

      -->
      <el-table style="width: 100%; width: 100%; margin: 10px 0px" border :data="trademarkArr">
        <el-table-column label="序号" width="80px" align="center" type="index" />
        <el-table-column label="品牌名称" align="center" prop="tmName"> </el-table-column>
        <el-table-column label="品牌LOGO" align="center">
          <template #="{ row }">
            <img :src="row.logoUrl" alt="没有图片ing" style="height: 100px; width: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="品牌操作" align="center">
          <template #="{ row }">
            <el-button
              type="primary"
              icon="Edit"
              @click="updateTrademark(row)"
              v-has="'btn.Trademark.update'"
            ></el-button>
            <el-button
              type="primary"
              icon="delete"
              @click="deltTrademark(row.id)"
              v-has="'btn.Trademark.remove'"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器,用来跳转到自己想要的数据页数
        pagination
          v-model:current-page 设置当前页码
          v-model:page-size      设置条数
          page-sizes	每页显示个数选择器的选项设置
          background	是否为分页按钮添加背景色
          layout	组件布局，子组件名用逗号分隔
          total	总条目数
        @current-change 
          此事件是当,当前页码发生变化时会触发,我们可以直接调用我们的请求方法,因为我们的数据已经实现了双向绑定,那么触发当前事件也就等于给我们的接口
          传页码的数据也不同了.比如:默认1,我们点击了3页码,这个时候因为双向绑定我们的页码对应的数据发生了改变,我们的事件触发然后重新请求,第三个3页码,每个页码每页默认为3条目个数
        @size-change
          当我们的每页默认的条目个数发生变化后触发,也是利用双向绑定的数据进行响应------我们改变页数后.....重新发我们对应数据的请求给接口
    -->
      <el-pagination
        @current-change="getHasTredemark"
        @size-change="sizeChange"
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[3, 5, 7, 9]"
        :background="true"
        layout="total, sizes, prev, pager,->, next, jumper"
        :total="total"
      />
    </el-card>
    <!-- 对话框组件,在我们添加品牌与修改已有品牌的业务使用结构
      v-model:属性控制用户对话框的显示与隐藏 true显示,false隐藏
      title:设置对话框左上角的标题 
    -->
    <el-dialog v-model="dialogFromVisible" :title="trademarkParams.id ? '修改品牌' : '添加品牌'">
      <el-form
        style="width: 80%"
        label-position="left"
        :model="trademarkParams"
        :rules="rules"
        ref="fromRef"
      >
        <el-form-item label="品牌名称" label-width="80px" prop="tmName">
          <el-input
            :placeholder="trademarkParams.id ? '请修改品牌名称' : '请添加品牌名称'"
            v-model="trademarkParams.tmName"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="80px" prop="logoUrl">
          <!-- upload 组件属性
            action是图片上传路径,要书写我们的代理服务器前缀,否则不会上传
          -->
          <el-upload
            class=""
            action="/api/admin/product/fileUpload"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <!-- 利用v-if,如果我们的值为空,则展现一个图标,有的时候,判断值,然后src动态展现值 -->
            <img v-if="trademarkParams.logoUrl" :src="trademarkParams.logoUrl" class="" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button @click="confirm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="">
import { reqAddTredemark, reqUpdateTredemark } from '@/API/product/trademark'
import { onMounted, ref, watch } from 'vue'
import useTrademark from '@/views/product/trademark/hooks/useTrademark'
import useDialog from '@/views/product/trademark/hooks/useDialog'
import usePagination from '@/views/product/trademark/hooks/usePagination'
/* 对话框组件绑定的是否可见的变量 */
const dialogFromVisible = ref(false)
/* 获取el-from组件实例 */
const fromRef = ref()
/* 分页器数据 */
const { pageNo, limit, total } = usePagination()
/* 品牌数据 */
const {
  trademarkArr,
  trademarkParams,
  addTrademark,
  updateTrademark,
  trademarkParamsClear,
  getHasTredemark,
  deltTrademark
} = useTrademark(pageNo, limit, total, dialogFromVisible)
/* 对话框数据 */
const { rules, handleAvatarSuccess, beforeAvatarUpload, confirm, cancel } = useDialog(
  trademarkParams,
  reqUpdateTredemark,
  reqAddTredemark,
  getHasTredemark,
  fromRef,
  dialogFromVisible
)
/* 防止页码条目个数bug
  在我们已经选定少量个数的时候突然切换到大个数后,我们的数据不够那么多页数
  列子:我们选1页有3页数,然后我们点44的然后再点每页有9页数,这个时候数据不足44页,故而会出现bug,所以,如果没有数据,我们让其页码默认为1,防止数据bug
  */
const sizeChange = () => {
  pageNo.value = 1
  getHasTredemark()
}
watch(dialogFromVisible, (newValue) => {
  if (!newValue) {
    trademarkParamsClear()
    fromRef.value?.resetFields()
  }
})
onMounted(() => {
  getHasTredemark()
})
</script>

<style scoped>
.box-card {
  width: 100%;
  height: 100%;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader-icon:hover {
  border-color: var(--el-color-primary);
}
</style>
